<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head th:replace="_fragments :: head(~{::title})">
		<title>分类页面</title>

	</head>
	<body>
		<nav th:replace="_fragments :: menu(2)" >

		</nav>
		<div class=" m-padded-tb-big m-container-small">
				<div class="ui container">
					<!--头部-->
					<div class="ui top attached segment">
						<div class="ui middle aligned two column	grid">
							<div class="column">
								<h3 class="ui teal header">分类</h3>
							</div>
							<div class="right aligned column">
								共	 <h3 class="ui orange header m-inline-block m-text-thin" th:text="${#arrays.length(types)}">14</h3> 个
							</div>
						</div>
					</div>
					<div class="ui  attached segment m-padded-tb-large">
						<div class="ui labeled button m-margin-tb-tiny"  th:each="map:${maps}">
							<a href="#" th:href="@{/types/{id}(id=${map.key.id})}" class="ui basic teal button" th:text="${map.key.name}">
								方法论
							</a>
							<div class="ui teal basic  left pointing  label" th:each="number:${map.value}" >
								<span  th:text="${number}">13</span>
							</div>
						</div>
						
					</div>
					<div class="ui top teal attached   segment">
						<div class="ui padded vertical segment m-padded-tb-large m-padded-lr-clear" th:each="blog:${pageInfo.list}">
							<div class="ui  mobile reversed stackable grid">
								<div class="  eleven wide column">
									<a th:href="'blog/' + ${blog.id}" style="color: black">
										<h3 class="ui header"  th:text="${blog.title}" >伍兹</h3></a>
									<p class="m-text-thin" th:text="${blog.description}">永远滴神永远滴神永远滴神永远滴神</p>
									<div class="ui stackable grid">
										<div class="eleven wide column">
											<div class="ui mini horizontal  link list">
												<div class="item">
													<img src="https://picsum.photos/id/103/50/50" alt="" class="ui avatar image" />
													<div class="content"><a href="#" class="header" th:text="${blog.user.username}">李军</a></div>
												</div>
												<div class="item">
													<i class="calender icon"></i><span th:text="${#dates.format(blog.createTime,'dd/MM/yyyy')}">2020</span>
												</div>
												<div class="item">
													<i class="eye icon" th:value="${blog.views}"></i> <span th:text="${blog.views}">666</span>
												</div>
											</div>
										</div>
										<div class="right aligned five wide column">
											<a href="#" target="_blank" class=" ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
										</div>
									</div>
									<div class="row">
										<div class="column">
											<div class="ui basic teal left pointing label m-padded-mini m-text-thin" th:text="${blog.tag.name}">方法论</div>
										</div>

									</div>
								</div>
								<div class="five wide column">
									<a href="#" target="_blank">
										<img src="https://picsum.photos/id/1025/200/100" class="ui rounded image" th:src="${blog.firstPicture}"/>
									</a>
								</div>
							</div>
						</div>



					</div>
				<div class="ui bottom attached segment">
							<div class="ui middle aligned two column	grid">
								<div class="column">
									<div class="item"><a class="ui mini blue basic button" th:href="@{'/types/'+${id}(pagenum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a></div>
								</div>
								<div class="right aligned column">
									<div class="item"><a class="ui mini blue basic button" th:href="@{'/types/'+${id}(pagenum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a></div>
								</div>
						</div>
						</div>
				</div>	
				</div>
		<br />
		<br />
		<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">

		</footer>
		<th:block th:replace="_fragments :: script">

		</th:block>

		<script>
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			});
		</script>
	</body>
</html>
